<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="../js/swiper-bundle.min.js"></script>
  <script src="../js/echarts.js"></script>
  <script src="../js/bootstrap.js"></script>
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <header>
    <div class="headleft">
      <img src="../img/logo.png" alt="">
      <h3>智慧书城后台管理系统</h3>
    </div>
    <div class="headright">
      <p id="headRight" style="margin: 0;"></p>
      <span>欢迎你, <i id="glname"></i></span>
      <button type="button" class="btn btn-outline-link" style="color: #ffff;" onclick="logout()">退出登录</button>
    </div>
  </header>
  <section>
    <aside>
      <div class="d-flex flex-column flex-shrink-0 p-3 bg-light col-lg-4" style="width: 280px;height: 100vh;;">
        <a href="##" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
          <img src="../img/logo.png" alt="" style="width: 100px;">
          <span class="fs-4">智慧书城</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="./SystemHomepage.html" class="nav-link link-dark" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>系统首页</i>
            </a>
          </li>
          <li class="nav-item">
            <a href="./goods.html" class="nav-link link-dark" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>商品管理</i>
            </a>
          </li>
          <li>
            <a href="./OrderManagement.html" class="nav-link link-dark">
              <span class="iconfont icon-dingdanguanli"></span>
              <i>订单管理</i>
            </a>
          </li>
          <li>
            <a href="./announcement.html" class="nav-link link-dark">
              <span class="iconfont icon-gonggaoguanli"></span>
              <i>公告管理</i>
            </a>
          </li>
          <li>
            <a href="./UserManagement.html" class="nav-link active">
              <span class="iconfont icon-yonghuguanli"></span>
              <i>用户管理</i>
            </a>
          </li>
        </ul>
      </div>
    </aside>
    <main>
      <div class="main-top">
        <p>后台管理</p>
        <span></span>
      </div>
      <div class="container mt-3 table table-bordered"
        style="background: #fff;padding:10px 15px 5px;position: relative;">
        <h2 style="margin: 11px  0px 23px 716px;">用户列表</h2>
        <button type="button" class="btn btn-outline" id="btnn" data-bs-toggle="modal" data-bs-target="#myModal1"
          style="margin-top: -20px;color: #fff;">添加用户</button>
        <table class="table table-hover table-bordered" style="text-align: center; margin-top: 15px; ">
          <thead id="td">
            <tr>
              <th>编号</th>
              <th>用户名</th>
              <th>密码</th>
              <th>性别</th>
              <th>用户等级</th>
              <th>联系电话</th>
              <th>邮箱</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="tb">
            <!--  <tr>
                      <td>1</td>
                      <td>wenwen</td>
                      <td>12345678</td>
                      <td>女</td>
                      <td>348027781@qq.com</td>
                      <td>18888888888</td>
                      <td>vip用户</td>
                      <td>
                        <button type="button" class="btn btn-outline">编辑</button>
                        <button type="button" class="btn btn-outline">删除</button>
                      </td>
                    </tr> -->
          </tbody>
        </table>
        <!-- 分页 -->
        <!-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group"style="margin:40px 0px 51px 717px;">
                  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
                  <label class="btn btn-outline-primary" for="btnradio1" onclick = "shou()">首页</label>
                
                  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
                  <label class="btn btn-outline-primary" for="btnradio2"onclick = "shang()" >上一页</label>
                
                  <input type="radio" class="btn-check" name="btnradio" id="btnradio3"onclick = "xia()" autocomplete="off">
                  <label class="btn btn-outline-primary" for="btnradio3">下一页</label>
    
                  <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
                  <label class="btn btn-outline-primary" for="btnradio4" onclick = "wei()">尾页</label>
                </div> -->
        <div style="text-align: center;">
          <button class="btn_page" onclick="shou()">首页</button>
          <button class="btn_page" onclick="shang()">上一页</button>
          <button class="btn_page" onclick="xia()">下一页</button>
          <button class="btn_page" onclick="wei()">尾页</button>
        </div>
      </div>
      <!-- 编辑模态框 -->
      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <input type="hidden" id="ompile">
            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">编辑用户信息</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
              <div class="mb-3 mt-3">
                <label for="email" class="form-label">用户名</label>
                <input type="email" class="form-control" id="uname" placeholder="请输入用户名" name="email">
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">密码</label>
                <input type="email" class="form-control" id="upassword" placeholder="请输入密码" name="email">
              </div>
              <div class="row" style="margin-bottom:10px">
                <div class="col-lg-10" style="line-height:32px">
                  <label><input type="radio" checked class="updatesex" name="sex" value="男">男</label>&nbsp;
                  <label><input type="radio" class="updatesex" name="sex" value="女">女</label>
                </div>
              </div>
              <div class="mb-3">
                <label for="pwd" class="form-label">用户等级</label>
                <select class="form-select" aria-label="Default select example" id="ulever">
                  <option selected value="普通用户">普通用户</option>
                  <option selected value="VIP用户">VIP用户</option>
                </select>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">电话号码</label>
                <input type="email" class="form-control" id="uphone" placeholder="请输入电话号码" name="email">
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">邮箱账号</label>
                <input type="email" class="form-control" id="uemail" placeholder="请输入邮箱账号" name="email">
              </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="userUpdate()">提交</button>
            </div>

          </div>
        </div>
      </div>


      <!-- 添加模态框 -->
      <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
          <div class="modal-content">
            <input type="hidden" id="compile">
            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加用户信息</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
              <div class="mb-3 mt-3">
                <label for="email" class="form-label">用户名</label>
                <input type="email" class="form-control" id="username" placeholder="请输入用户名" name="email">
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">密码</label>
                <input type="email" class="form-control" id="password" placeholder="请输入密码" name="email">
              </div>
              <div class="row" style="margin-bottom:10px">
                <div class="col-lg-10" style="line-height:32px">
                  <label><input type="radio" checked class="esex" name="sex" value="男">男</label>&nbsp;
                  <label><input type="radio" class="esex" name="sex" value="女">女</label>
                </div>
              </div>
              <div class="mb-3">
                <label for="pwd" class="form-label">用户等级</label>
                <select class="form-select" aria-label="Default select example" id="lever">
                  <option selected value="普通用户">普通用户</option>
                  <option selected value="VIP用户">VIP用户</option>
                </select>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">电话号码</label>
                <input type="email" class="form-control" id="phone" placeholder="请输入电话号码" name="email">
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">邮箱账号</label>
                <input type="email" class="form-control" id="email" placeholder="请输入邮箱账号" name="email">
              </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="ok()">确认</button>
            </div>
            <!--  <input type="hidden" id="address"> -->
          </div>
        </div>
      </div>
    </main>
  </section>
  <script src="../js/header.js"></script>
  <script src="../js/UsweManagement copy.js"></script>

</body>

</html>